<template>
  <div>
    <div class="nav-top">
      <div>
        <div>
          <router-link to="/sping">
            shopping
            <span style="font-size:0.3rem" class="el-icon-shopping-cart-2"></span>
          </router-link>
        </div>
      </div>
    </div>
    <div class="nav">
      <div>
        <router-link to="/home">Home</router-link>|
        <router-link to="/about">About</router-link>
      </div>
    </div>

    <div>
      <router-view />
    </div>
  </div>
</template>

<style scoped>
.nav-top a {
  color: rgb(0, 0, 0);
}
.nav-top div div {
  margin-right: 7%;
}
.nav-top div {
  line-height: 8vh;
  text-align: right;

  background: white;
}
.nav-top {
  width: 100%;
  height: 8vh;
}
.nav a {
  color: rgb(0, 0, 0);
}
.nav a.router-link-exact-active {
  color: #80024fa6;
}
.nav div {
  margin-left: 10%;
  line-height: 6vh;
}
.nav {
  width: 100%;
  height: 6vh;
  background: white;
 
}
* {
  font-size: 0.16rem;
}
</style>